<template>
  <div class="json-editor">
    <textarea ref="textarea"></textarea>
  </div>
</template>

<script>

// import CodeMirror from 'codemirror'
import * as CodeMirror from 'codemirror/lib/codemirror'

import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
require('script-loader!jsonlint')
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'

export default {
  name: 'JsonEditor',
  /* eslint-disable vue/require-prop-types */
  props: ['value'],
  data () {
    return {
      jsonEditor: false
    }
  },
  watch: {
    value (value) {
      try {
        console.log('----01--this.jsonEditor=', this.jsonEditor)
        console.log('----02--this.jsonEditor.getValue=', this.jsonEditor.getValue)
        const editorValue = this.jsonEditor.getValue()
        // debugger
        if (value !== editorValue) {
          this.setValue(this.value, { testStr: 'watch-value' })
        }
      } catch (error) {
        // debugger
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        const dom = this.$refs.textarea
        console.log('----00--this.$refs.textarea=', dom)
        console.log('----01--CodeMirror=', CodeMirror)
        console.log('----02--CodeMirror.fromTextArea=', CodeMirror.fromTextArea)
        // CodeMirror.fromTextArea()中第一个参数是DOM元素，而且必须是textarea元素；第二个参数是可选配置项
        this.jsonEditor = CodeMirror.fromTextArea(dom, {
          lineNumbers: true,
          mode: 'application/json',
          gutters: ['CodeMirror-lint-markers'],
          theme: 'rubyblue',
          lint: true
        })

        console.log('----11--this.jsonEditor=', this.jsonEditor)
        console.log('----12--this.jsonEditor.setValue=', this.jsonEditor.setValue)
        this.setValue(this.value, { testStr: 'mounted' })
        // console.log('----2')
        this.jsonEditor.on('change', cm => {
          // debugger
          this.$emit('changed', cm.getValue())
          this.$emit('input', cm.getValue())
        })
      }, 1000)
    })
  },
  methods: {
    getValue () {
      return this.jsonEditor.getValue()
    },
    setValue (val, { testStr }) {
      const _this = this
      this.$nextTick(() => {
        // debugger
        console.log('setValue111>>', testStr)
        try {
          console.log('----3', _this.jsonEditor.setValue)
          _this.jsonEditor.setValue(val)
        } catch (error) {
          // debugger
          console.log('----4')
        }
        // this.jsonEditor.setValue(JSON.stringify(val, null, 2))
      })
    },
    // 获取内容 - 父级引用
    getContent () {
      return this.getValue()
    },
    // 设置内容, type=1:在光标出插入内容
    setContent (val, type) {
      console.log('setContent000')
      // const dom = this.$refs.myCm
      // debugger
      setTimeout(() => {
        console.log('3秒后执行---setContent11')
        if (type === 1 && val !== '') {
          // const pos1 = this.codemirrorEditor.getCursor() // TODO:这个有问题，暂时不能用
          // const pos2 = {}
          // pos2.line = pos1.line
          // pos2.ch = pos1.ch
          // this.codemirrorEditor.replaceRange(val, pos2)

          this.setValue(val, { testStr: 'setContent-type=', type })
        } else {
          this.setValue(val, { testStr: 'setContent-type=', type })
        }
      }, 3000)
    }
  }
}
</script>

<style  lang="scss">
// @import '~@/styles/variables.scss';
.CodeMirror {
  height: 100%;
}
.cm-s-idea,
.cm-s-rubyblue {
  // z-index: $toolTipZindex;
}
.json-editor {
  height: 100%;
  position: relative;
}
// .json-editor >>> .CodeMirror {
//   height: auto;
//   min-height: 300px;
// }
// .json-editor >>> .CodeMirror-scroll {
//   min-height: 300px;
// }
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}
.addbtn {
  margin-bottom: 15px;
  margin-left: 30px;
}
</style>
